<template>
  <div>
    <!-- 添加/编辑 -->
    <div class="div-boder-100 pad-t-10">
      <el-tabs v-model="activeMemberDetail" class="member-list-tab" @tab-click="handleClick">
        <el-tab-pane label="账号信息" name="0"></el-tab-pane>
        <el-tab-pane label="个人简历" name="1" v-if="versionType == 1"></el-tab-pane>
        <el-tab-pane label="交易记录" name="2"></el-tab-pane>
      </el-tabs>
      <!-- 账号信息 -->
      <div v-show="informationDiv">
        <div class="radius-container">
          <div class="border-b pad-10 font-w font-15 topbar-style">基本信息</div>
          <div class="pad-20">
            <div style="background-color: #FEF0F0; border-color: #F78989; height: 50px; line-height: 50px" class="text-align-c" v-if="member.nature == 0">
              <span style="color: #F78989; font-size: 16px">温馨提示:公共微客在完成任务众包和内容分发后、分享商品和顾客购买商品后,平台将抽佣{{ member.commissionPlatform }}%的手续费</span>
            </div>
            <el-form ref="memberForm" :model="member" label-position="right" class="member-form" label-width="190px">
              <div class="container-box pad-t-30">
                <el-form-item label="头像：" prop="avatar">
                  <div class="avatar-bar">
                    <img v-if="member.avatar" :src="member.avatar" class="avatar-pic">
                    <span class="user-nature">{{ natures[member.nature] }}</span>
                  </div>
                </el-form-item>
                <el-form-item label="昵称：" prop="nickname">
                  <div>{{ member.nickname }}</div>
                </el-form-item>
                <el-form-item label="标签：" prop="labelName">
                  <div v-if="memberLabelList">
                    <template v-for="item in memberLabelList">
                      <span class="pad-r-10"><el-tag>{{ item.labelName }}</el-tag></span>
                    </template>
                  </div>
                </el-form-item>
                <template v-if="member.nature !== 0">
                  <el-form-item label="手机号：" prop="phone">
                    <div>{{ member.phone }}</div>
                  </el-form-item>
                  <el-form-item label="微信号：" prop="wechatNo">
                    <div>{{ member.wechatNo }}</div>
                  </el-form-item>
                </template>
                <el-form-item label="共与TA合作项目：" prop="bankName" v-if="versionType == 1">
                  <div class="flex">
                    <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            class="pad-r-15 mar-t-1 mar-r--5"
                            content="共与TA合作的项目 = 任务众包接单数 + 内容分发接单数 + 商品分销接单数。">
                      <svg-icon slot="reference" class="questionCircle inline-block" icon-class="questionCircle" />
                    </el-popover>
                    <div></div>
                  </div>
                </el-form-item>
                <el-form-item label="共支付TA：" prop="bankName" v-if="versionType == 1">
                  <div class="flex">
                    <el-popover
                            placement="top-start"
                            width="200"
                            trigger="hover"
                            class="pad-r-15 mar-t-1 mar-r--5"
                            content="共支付TA = 任务众包支付TA金额 + 内容分发TA获得金额 + 商品分销TA获得分销金额。">
                      <svg-icon slot="reference" class="questionCircle inline-block" icon-class="questionCircle" />
                    </el-popover>
                    <div></div>
                  </div>
                </el-form-item>
                <el-form-item label="注册时间：" prop="taskRegisteredTime">
                  <div>{{ member.taskRegisteredTime }}</div>
                </el-form-item>
                <!--  <el-form-item label="备注" prop="remarkName">
                    <div><el-input v-model="memberLabel.conten" style="width: 400px"></el-input></div>
                  </el-form-item>-->
                <el-form-item label="是否禁用：" prop="authFlag">
                  {{ taskStatuss[member.taskStatus] }}
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <div class="clearfix">
          <div class="pad-t-1 mar-t--10"></div>
        </div>
        <div class="radius-container">
          <div class="border-b pad-10 font-w font-15 topbar-style">实名信息</div>
          <div class="pad-20">
            <el-form ref="memberForm" :model="member" label-position="right" class="member-form" label-width="190px">
              <template v-if="memberDetailsDTO">
                <div class="container-box">
                  <el-form-item label="身份证照片：" prop="cardPositiveUrl">
                    <div>
                      <img v-if="memberDetailsDTO.cardPositiveUrl" :src="memberDetailsDTO.cardPositiveUrl" height="100px">
                      <img v-if="memberDetailsDTO.cardReverseUrl" :src="memberDetailsDTO.cardReverseUrl" height="100px">
                    </div>
                  </el-form-item>
                  <el-form-item label="真实姓名：" class="font-18" prop="realName">
                    <div v-if="memberDetailsDTO.realName">{{ memberDetailsDTO.realName }}</div>
                  </el-form-item>
                  <el-form-item label="身份证号码：" prop="nickname">
                    <div>{{ memberDetailsDTO.cardNo }}</div>
                  </el-form-item>
                  <el-form-item label="是否实名：" prop="authFlag">
                    {{ authFlags[member.authFlag] }}
                  </el-form-item>
                </div>
              </template>
            </el-form>
          </div>
        </div>
        <div class="radius-container container-nonebg">
          <el-form label-width="80px" >
            <el-button type="primary" @click="$router.go(-1)">返回</el-button>
          </el-form>
        </div>
      </div>
      <!-- 个人简历 -->
      <div v-show="resumeDiv" class="container-box pad-b-30">
        <table v-if="memberResume">
          <tr>
            <td colspan="5" style="height: 100px"><span><h1>个人简历</h1></span></td>
          </tr>
          <tr>
            <td class="table-td-color">真实姓名</td>
            <td>
              <template v-if="memberResume.realName">
                {{ memberResume.realName }}
              </template>
            </td>
            <td class="table-td-color">性别</td>
            <td>{{ memberResume.gender | genderFilter }}</td>
            <td rowspan="5"><img v-if="memberResume.avatar" :src="memberResume.avatar" class="avatar-pic"></td>
          </tr>
          <tr>
            <td class="table-td-color">出生日期</td>
            <td>{{ memberResume.birthday }}</td>
            <td class="table-td-color">学历</td>
            <td>{{ memberResume.education }}</td>
          </tr>
          <tr>
            <td class="table-td-color">职业</td>
            <td>{{ memberResume.careerName }}</td>
            <td class="table-td-color">地址</td>
            <td>{{ memberResume.address }}</td>
          </tr>
          <tr>
            <td class="table-td-color">联系电话</td>
            <td>{{ memberResume.phone }}</td>
            <td class="table-td-color">电子邮箱</td>
            <td>{{ memberResume.email }}</td>
          </tr>
          <tr style="height: 150px">
            <td class="table-td-color">擅长技能</td>
            <td colspan="3">
              <template v-for="item in memberResumeLabelList">
                <span class="pad-r-10"><el-tag>{{ item.labelName }}</el-tag></span>
              </template>
            </td>
          </tr>
          <tr><td colspan="5"></td></tr>
          <tr>
            <td colspan="5" class="table-td-color" style="height: 100px">项目经历</td>
          </tr>
          <tr>
            <td colspan="5" style="height: 300px"><pre>{{ memberResume.projectHistory}}</pre></td>
          </tr>
        </table>
      </div>

      <!-- 交易记录 -->
      <div v-show="recordDiv" class="radius-container">
         <el-tabs v-model="activeName" class="border-card" @tab-click="handleClickRecord">
          <el-tab-pane label="计件技能类" name="0" v-if="versionType == 1"></el-tab-pane>
          <el-tab-pane label="计件推广" name="1" v-if="versionType == 1"></el-tab-pane>
          <el-tab-pane label="悬赏任务" name="2" v-if="versionType == 1"></el-tab-pane>
          <el-tab-pane label="内容分发" name="3" v-if="versionType == 1"></el-tab-pane>
          <el-tab-pane label="商品分销" name="4"></el-tab-pane>
        </el-tabs>
        <template v-if="activeName == '1' || activeName == '2' || activeName == '0'">
          <div class="table-container mar-l-20 mar-r-20">
            <el-table :data="memberList" @sort-change="sortChange" @selection-change="handleSelectionChange"
                      v-loading="listLoading" element-loading-text="加载中"
                      style="width: 100%">
              <el-table-column min-width="200px" label="项目名称" prop="taskName">
              </el-table-column>
              <el-table-column min-width="135px" label="项目酬金" prop="paymentAmount">
              </el-table-column>
              <el-table-column min-width="135px" label="录用人数" prop="enrollNum">
              </el-table-column>
              <el-table-column min-width="135px" label="结算方式" prop="settleType">
                <template slot-scope="scope">
                  {{ dict.settleType[scope.row.settleType]}}
                </template>
              </el-table-column>
              <el-table-column min-width="135px" label="支付周期" prop="payCycle">
                <template slot-scope="scope">
                  {{ dict.payCycle[scope.row.payCycle]}}
                </template>
              </el-table-column>
              <el-table-column min-width="165px" label="创建时间" prop="createTime" sortable="custom">
                <template slot-scope="scope">
                  <span>{{scope.row.createTime}}</span>
                </template>
              </el-table-column>
              <el-table-column min-width="200px" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">查看详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 列表分页 -->
          <div class="pagination">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="memberListQuery.currentPage"
                           :page-sizes="[10, 20, 50, 100]" :page-size="memberListQuery.size"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
          </div>
        </template>
        <template v-if="activeName == '3'">
          <share :memberId="memberId"></share>
        </template>
        <template v-if="activeName == '4'">
          <project-order :memberId="memberId"></project-order>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import { getMemberByMemberId, saveMember, getMemberResumeByMemberId, getRecordTaskInfo } from '@/api/user/member'
  import { getToken } from '@/utils/auth'
  import Tinymce from '@/components/Tinymce'
  import Share from '@/components/Member/Share'
  import ProjectOrder from '@/components/Member/ProjectOrder'

  export default {
    components: {
      Tinymce,
      Share,
      ProjectOrder
    },
    props: {
      memberId: {
        type: String
      },
      enterpriseId: {
        type: String
      }
    },
    data() {
      return {
        versionType: 0,
        routeMemberId: null,
        memberLabelList: [],
        memberResumeLabelList: [],
        natures: {},
        authFlags: {},
        taskStatuss: {},
        informationDiv: true,
        resumeDiv: false,
        recordDiv: false,
        isHaveContent: true,
        total: 1,
        activeName: this.versionType * 1 === 1 ? '0' : '4',
        multipleSelection: [],
        memberList: [],
        listLoading: true,
        activeMemberDetail: 0,
        token: null,
        memberListQuery: {
          currentPage: 1,
          size: 10,
          memberId: this.memberId,
          enterpriseId: this.getEnterpriseId(),
          taskType: 1,
          remunerationType: '',
          remunerationTypeModel: ''
        },
        member: {
          memberId: '',
          nickname: '',
          realName: '',
          nature: null,
          memberGrade: '',
          labelName: '',
          phone: '',
          taskRegisteredTime: '',
          cardNo: '',
          taskStatus: '',
          avatar: '',
          memberRemarkId: '',
          remarkName: '',
          totalNumber: '',
          wxaCode: '',
          wechatNo: ''
        },
        memberDetailsDTO: {
          memberDetailsId: '',
          memberId: '',
          cardPositiveUrl: '',
          cardReverseUrl: '',
          cardNo: '',
          realName: '',
          gender: ''
        },
        memberResume: {
          memberResumeId: '',
          memberId: '',
          realName: '',
          gender: '',
          birthday: '',
          avatar: '',
          graduationTime: '',
          phone: '',
          email: '',
          occupation: '',
          residentialAddress: '',
          workHistory: '',
          projectHistory: ''
        },
        memberLabel: {
          memberId: '',
          content: ''
        },
        dict: {}
      }
    },
    // 过滤器
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      },
      genderFilter(gender) {
        const genderMap = {
          1: '男',
          2: '女'
        }
        return genderMap[gender]
      }
    },
    // 初始化页面
    created() {
      this.initMember()
      this.versionType = this.getVersionType() * 1
      this.token = { accessToken: getToken() }
    },
    methods: {
      initMemberList() {
        this.listLoading = true
        if (this.activeName === '0') {
          this.memberListQuery.taskType = '1'
          this.memberListQuery.remunerationType = '1'
          this.memberListQuery.remunerationTypeModel = '11'
        }
        if (this.activeName === '1') {
          this.memberListQuery.taskType = '1'
          this.memberListQuery.remunerationType = '1'
          this.memberListQuery.remunerationTypeModel = '12'
        }
        if (this.activeName === '2') {
          this.memberListQuery.taskType = '1'
          this.memberListQuery.remunerationType = '2'
        }
        getRecordTaskInfo(this.memberListQuery).then(response => {
          this.memberList = response.data.records
          this.dict = response.data.dict
          this.total = response.data.total
          this.listLoading = false
        })
      },
      initMember() {
        getMemberByMemberId(this.memberId, this.getEnterpriseId()).then(response => {
          this.member = response.data
          if (response.data) {
            this.memberLabelList = response.data.memberLabelList
          }
          this.memberDetailsDTO = response.data.memberDetails
          if (response.data.dict) {
            this.natures = response.data.dict.nature
            this.authFlags = response.data.dict.authFlag
            this.taskStatuss = response.data.dict.taskStatus
          }
        })
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.memberListQuery.ascs = 'createTime'
            this.memberListQuery.descs = ''
          } else {
            this.memberListQuery.ascs = ''
            this.memberListQuery.descs = 'createTime'
          }
        }
        this.initMemberList()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleSizeChange(val) {
        this.memberListQuery.size = val
        this.initMemberList()
      },
      handleCurrentChange(val) {
        this.memberListQuery.currentPage = val
        this.initMemberList()
      },
      handleClick() {
        if (this.activeMemberDetail === '0') {
          this.informationDiv = true
          this.resumeDiv = false
          this.recordDiv = false
        }
        if (this.activeMemberDetail === '1') {
          this.informationDiv = false
          this.resumeDiv = true
          this.recordDiv = false
          this.getMemberResume()
        }
        if (this.activeMemberDetail === '2') {
          this.informationDiv = false
          this.resumeDiv = false
          this.recordDiv = true
          this.initMemberList()
        }
      },
      handleClickRecord() {
        this.searchReset()
        this.initMemberList()
      },
      searchReset() {
        this.memberListQuery = {
          currentPage: 1,
          size: 10,
          memberId: this.memberId,
          enterpriseId: this.getEnterpriseId(),
          taskType: 1,
          remunerationType: '',
          remunerationTypeModel: ''
        }
      },
      handleUpdate(row) {
        this.$router.push({ path: '/project/task/detail/index', query: { taskId: row.taskId, taskType: row.taskType, taskStatus: row.taskStatus }})
      },
      getMemberResume() {
        getMemberResumeByMemberId(this.member.memberId).then((response) => {
          if (response.isError) return
          this.memberResume = response.data
          if (response.data) {
            this.memberResumeLabelList = response.data.memberLabelList
          }
        })
      },
      // 保存用户信息
      saveData() {
        this.$refs['memberForm'].validate((valid) => {
          if (valid) {
            saveMember(this.member).then(() => {
              this.initMemberList()
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
            })
          }
        })
      }
    }
  }

</script>
<style lang="less" scoped>
  .avatar-pic{
    border-radius: 8px;
  }
  .div-boder-100 {
    width: 100%;
    height: 100%;
  }
  .div-auto {
    margin: 0 auto;
    width: 50%;
    margin-bottom: 50px;
  }
  .container-box table{
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
  }
  .container-box table td, .container-box th{
    width: 20%;
    height: 50px;
    border: 1px solid #e4e7ed;
    text-align: center;
  }
  .container-box .table-td-color{
    background-color: #f2f2f2;
  }
  .avatar-bar{
    position: relative;
  .avatar-pic{
    border-radius: 100px;
    width: 70px;
    height: 70px;
  }
  .user-nature{
    position: absolute;
    left: 0;
    bottom: -16px;
    background: #ffbc13;
    color: #1e1e1e;
    border-radius: 50px;
    padding: 4px 10px;
    line-height: 1.3;
    font-size: 12px;
  }
  }
</style>
